<template>
	<!--供应商and客户销售and采购汇总-->
	<view class="wrapper" :style="{height:wrapperHeight +'px'}">
		<!--<view class="title-padding"></view>-->
		<view class="headerGd">
			<view class="header">
				<button class="back" @tap="back()"></button>
				{{OrderTitle}}
				<button class="filter" @tap="filter()"></button>
			</view>
		</view>
		<view class="container" :style="{height: containerHeight + 'px'}">
			<view class="curstom">
				<view class="changeList" @tap="changeListAl">

				</view>
				<view class="curstomName">
					{{StoreName}}
				</view>
				<view class="filterTime">
					<text>{{StoreCode}}</text>
					<text>{{BrachName}}</text>
				</view>
			</view>
			<view class="orderList" :style="{height: orderListHeight + 'px' }" v-show="!isList">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}" @tap="changeWidth()">
					<text :style="{width:tdWidth[index]+'px'}" v-for="(item,index) in tdHeaderList" :key="index">
						{{item.name}}
					</text><!-- <text :style="{width:tdWidth[1]+'px'}">
						客户编码
					</text><text :style="{width:tdWidth[2]+'px'}">
						客户
					</text><text :style="{width:tdWidth[3]+'px'}">
						{{!isSupperPurb?"出库数量":"进货数量"}}
					</text><text :style="{width:tdWidth[4]+'px'}">
						{{!isSupperPurb?"出库金额":"进货金额"}}
					</text><text :style="{width:tdWidth[5]+'px'}">
						退货数量
					</text><text :style="{width:tdWidth[6]+'px'}">
						退货金额
					</text><text :style="{width:tdWidth[7]+'px'}">
						差异数量
					</text><text :style="{width:tdWidth[8]+'px'}">
						差异金额
					</text><text :style="{width:tdWidth[9]+'px'}">
						{{!isSupperPurb?"销售数(未审)":"进货数(未审)"}}
					</text><text :style="{width:tdWidth[10]+'px'}">
						退货数(未审)
					</text> -->
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in orderList" :key="index">
						<text :style="{width:tdWidth[0]+'px'}">
							{{index+1}}
						</text>
						<text :style="{width:tdWidth[1]+'px'}">
							{{item.StoreCode}}
						</text>
						<text :style="{width:tdWidth[2]+'px'}">
							{{item.StoreName}}
						</text>
						<text :style="{width:tdWidth[3]+'px'}">
							{{item.BranchName}}
						</text>
						<text :style="{width:tdWidth[3]+'px'}">
							{{item.IsStop?"是":"否"}}
						</text>
					</view>
					
				</view>
				
			</view>
			<view class="flOptions">
				<button @tap="Add">新增</button>
			</view>
			<view class="orderLookAllList" :style="{height: orderListHeight + 'px'}" v-show="isList">
				<view class="orderLookItem" v-for="(item,index) in orderList" :style="{ display:(nowRote === index) ? 'table':'block'}"
				 :key="index" @tap="lookMore(index)">
					<text>{{index+1}}</text>
					<text>仓库编号:{{item.StoreCode}}</text>
					<text>仓库名称:{{item.StoreName}}</text>
					<text>所属机构:{{item.BranchName}}</text>
					<text>停用:{{item.IsStop?"是":"否"}}</text>
					<button class="lookMoreInfo" :style="{ transform :(nowRote == index)  ? 'rotate(180deg)':'rotate( 0deg)'}"></button>
				</view>
			</view>
		</view>
		<view class="changetdWidth" v-show="showChange">
			<view class="changetdWidthHeader">修改列长度</view>
			<view  class="changetdWidthContain">
			<view v-for="(item,index) in tdHeaderList" :key="index">
				<view class="changeItem">
					<text class="liName">{{item.name}}列</text>
					<input v-model="tdWidth[index]" />
				</view>
			</view>
			</view>
			<view class="sureBt">
				<button  @tap="hideChaneg()">确定</button>
			</view>
		</view>
	</view>
	
</template>
<script>
	import * as Api from '@/syApis/syDa/syDa.js'
	export default {
		created() {
			var $this = this;
			uni.getSystemInfo({
				success(res) {
					$this.wrapperHeight = res.windowHeight;
					$this.containerHeight = res.windowHeight - 54 - 32.5;
					$this.orderListHeight = res.windowHeight - 104 - 32.5;
					$this.orderLiHeight = res.windowHeight - 104 - 80 - 2 - 32.5;
				}
			});
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

			this.getCgOrder();
			
		},
		computed:{
			 tdAllWidth(){
				 var tdAllWidth = 0;
				 this.tdWidth.forEach(item=>{
					   tdAllWidth+=parseFloat(item);
				 });
				 tdAllWidth+=this.tdWidth.length-1;
				 return tdAllWidth;
			 }
		},
		watch: {
			//统计数量
			orderList(oldval, newval) {
				var inPurSaleQty = 0;
				var inPurSaleAmount = 0
				var outPurQty = 0;
				var outPurAmount = 0;
				var inGetQty = 0;
				var ouGetQty = 0;
				var cyQty = 0;
				var cyAmount = 0;
				var _this = this;
				this.orderList.forEach(item => {
					inPurSaleQty += item.real_qty;
					inPurSaleAmount += item.real_Amount;
					outPurQty += item.return_qty;
					outPurAmount += item.return_Amount;
					inGetQty += item.real_qty2;
					ouGetQty += item.return_qty2;
					cyQty += item.Qty;
					cyAmount += item.Amount;
				});
				this.inPurSaleQty = inPurSaleQty;
				this.inPurSaleAmount = inPurSaleAmount;
				this.outPurQty = outPurQty;
				this.outPurAmount = outPurAmount;
				this.inGetQty = inGetQty;
				this.ouGetQty = ouGetQty;
				this.cyQty = cyQty;
				this.cyAmount = cyAmount;
			}
		},
		onLoad(options) {
			//采购订单
			if (options.type == 0) {
				this.OrderTitle = "仓库档案";
				this.isSupperPurb = true;
			}
			//销售订单
			else {
				this.OrderTitle = "仓库档案";
				this.isSupperPurb = false;
			}
		},
		methods: {
			AddListen(){
				var _this = this;
				this.$eventHub.$on('fire', function(data) {
					_this.StoreName = data.StoreName== "" ? "全部仓库" : data.StoreName;;
					_this.StoreCode = data.StoreCode;
					_this.curstomName = data.BrachName;
					_this.getCgOrder(data);
					_this.$eventHub.$off("fire");
				});
			},
			Add(){
				uni.navigateTo({
					url: './info-storeuseDetail'
				})
			},
			//修改宽度
			changeWidth(){
				 this.showChange = true;
			},
			hideChaneg(){
				 this.showChange = false;
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//跳转到筛选条件页
			filter() {
				this.AddListen();
				uni.navigateTo({
					url: './info-storeuseFilter'
				})
			},
			//获取汇总数据
			getCgOrder: function(filter) {
				let data = {};
				if (filter == undefined) {
					data = {
						StartDate: this.startTime,
						EndDate: this.endTime
					}
				} else {
					data = filter;
				}
				var _this = this;
				if (!this.isSupperPurb) {
					Api.Get_StoreMessage(data, function(res) {
						if (res.state) {
							if (res.data.ErrorMsg == "获取登录信息失败") {

							} else if (res.data.ErrorMsg != "") {
								Api.showTip(res.data.ErrorMsg);
							} else {
								_this.orderList = _this.setGetTwoFloat(res.data.ResultMsg);
							}
						} else {
							Api.showTip("服务器开小差了");
						}
					});
				} else {
					Api.GetSupplierPurchase(data, function(res) {
						if (res.state) {
							if (res.data.ErrorMsg == "获取登录信息失败") {

							} else if (res.data.ErrorMsg != "") {
								Api.showTip(res.data.ErrorMsg);
							} else {
								_this.orderList = _this.setGetTwoFloat(res.data.ResultMsg);
							}
						} else {
							Api.showTip("服务器开小差了");
						}
					});
				}
			},
			//将数额保留两位小数
			setGetTwoFloat(arr) {
				arr.forEach((item, index) => {
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].real_Amount = Api.setTwoFloat(item.real_Amount);
					arr[index].return_qty = Api.setTwoFloat(item.return_qty);
					arr[index].real_qty2 = Api.setTwoFloat(item.real_qty2);
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].return_qty2 = Api.setTwoFloat(item.return_qty2);
					arr[index].Qty = Api.setTwoFloat(item.Qty);
					arr[index].Amount = Api.setTwoFloat(item.Amount);
				});
				return arr;
			},
			lookMore: function(index) {
				this.nowRote = this.nowRote == index ? "-1" : index;
			},
			changeListAl: function() {
				this.isList = !this.isList;
			},
		},
		
		data() {
			return {
				showChange:false,
				orderList: [],
				containerHeight: 100,
				wrapperHeight: 600,
				orderListHeight: 100,
				orderLiHeight: 100,
				isList: true,
				startTime: "",
				endTime: "",
				curstomName: "全部客户",
				//订单页标题
				OrderTitle: "",
				//是否供应商销售汇总
				isSupperPurb: false,
				nowRote: -1,
				//进货/销售数量总计
				inPurSaleQty: 0,
				//进货/销售金额总计
				inPurSaleAmount: 0,
				//退货数量总计
				outPurQty: 0,
				//退货金额总计
				outPurAmount: 0,
				//进货数总计
				inGetQty: 0,
				//退货数总计
				ouGetQty: 0,
				//差异数
				cyQty: 0,
				//差异金额
				cyAmount: 0,
				//td宽度列表
				tdWidth:[125,125,125,125,125],
				//tb表头
				tdHeaderList:[
				{
					name:"序号"
				},
				{
					name:"仓库编号"
				},{
					name:"仓库名称"
				},{
					name:"所属机构"
				},{
					name:"停用"
				}
				],
				StoreName:"",
				StoreCode:"",
				BrachName:""
			}
		}
	}
</script>

<style lang="scss">
   @import url('../../style/changecolum.scss');
	/*图标的大小*/
	$iconWidth:40upx;
	$iconHeight:40upx;
	$iconBackSize:40upx;

	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
	}

	.wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: $bb-bg-color;
		display: table;

		.header {
			position: relative;
			text-align: center;
			font-size: 32upx;
			color: #FFF;

			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 20upx;
				top: 30upx;
				background-size: $iconBackSize;
			}

			.filter {
				width: $iconWidth;
				height: $iconHeight;
				position: absolute;
				right: 20upx;
				top: 30upx;
				background: url(../../static/cg/filter.png);
			}
		}
	}

	.container {
		font-size: 14px;
		.curstom {
			width: 100%;
			height: 50px;
			line-height: 50px;
			display: flex;
			padding-left: 10px;
			padding-right: 10px;
			box-sizing: border-box;
			background: #030ed9;
			box-sizing: border-box;
			color: #FFF;

			.curstomName {
				flex: 1;
				text-align: center;
			}

			.filterTime {
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;

				text {
					flex: 1;
					line-height: 50upx;
					height: 50upx;
					
				}
			}
			.changeList {
				width: 60upx;
				height: 60upx;
				background: url(../../static/changeIcon.png) no-repeat;
				background-size: 100%;
				margin-top: 30upx;
			}
		}

		//表格单据
		.orderList {
			width: 100%;
			overflow: auto;
			box-sizing: border-box;

			text {
				float: left;
				text-align: center;
				box-sizing: border-box;
				display: inline-block;
				height: 40px;
				line-height: 40px;
				border-right: 1px solid #ebebeb;
				white-space:nowrap;
				text-overflow:ellipsis;
				overflow:hidden;
// 				&:nth-child(1) {
// 					width: 80px;
// 				}
// 
// 				&:nth-child(2) {
// 					width: 125px;
// 				}
// 
// 				&:nth-child(3) {
// 					width: 200px;
// 				}
// 
// 				&:nth-child(n+4) {
// 					width: 125px;
// 				}

				&:last-child {
					border: none;
				}
			}

			.orderNav {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				overflow: hidden;
			}

			.orderLi {
				background: #ebebeb;
				.orderItem {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #ebebeb;
					box-sizing: border-box;
					border-bottom: 1px solid #CCCCCC;
					border-left: 1px solid #CCC;
					border-right: 1px solid #CCC;

					text {
						border-right: 1px solid #CCC;

						&:last-child {
							border: none;
						}
					}
				}
			}

			.allPrice {
				@extend .orderNav;
				background: #030ed9;
				color: #FFF;
			}
		}
.flOptions {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		z-index:99999;
		button {
			flex: 1;
			height: 100upx;
			border-radius: 0upx;
			background: #031ae6;
			color: #FFF;
	
			&:first-child {
				border-right: 1px solid #FFF;
			}
		}
	}
		//列表单据
		.orderLookAllList {
			width: 100%;
			background: #ebebeb;
			box-sizing: border-box;
			padding: 30upx;
			box-sizing: border-box;
			overflow: auto;
	

			.orderLookItem {
				width: 100%;
				height: 220upx;
				overflow: hidden;
				position: relative;
				border-radius: 20upx;
				background: #FFF;
				box-sizing: border-box;
				padding-left: 30upx;
				padding-right: 100upx;
				padding-top: 5upx;
				padding-bottom: 5upx;
				margin-bottom: 20upx;
			}
			.lookMoreInfo {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/pull.png) no-repeat;
				position: absolute;
				bottom: 10upx;
				right: 10upx;
				padding: 0upx;
				background-size: 100% 100%;
				transition: height 2s;
			}
			text {
				display: block;
				font-size: 30upx;
				&:nth-child(1) {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: $iconWidth;
					height: $iconHeight;
					border-radius: 10upx;
					text-align: center;
					display: table;
					color: #000;
					line-height: $iconHeight;
					padding: 5upx;
				}
				&:nth-child(n+2) {
					height: 55upx;
					line-height: 55upx;
					display: table;
				}
			}
			.lookMoreClass {
				display: table;

			}
			.openAndClose {
				transform: rotate(180deg);
			}
		}

	}

</style>
